<template>
  <div class="upload-img-wrapper">
    <a-upload
      v-model:file-list="fileList"
      name="avatar"
      list-type="picture-card"
      class="avatar-uploader"
      :show-upload-list="false"
      :customRequest="handleChange"
      :before-upload="beforeUpload"
    >
      <img v-if="imageUrl != '' && imageUrl != null" :src="imageUrl" class="bg_img" />
      <div v-else>
        <loading-outlined v-if="loading" />
        <plus-outlined v-else />
        <div class="ant-upload-text">上传图片</div>
      </div>
      <img
        src="./img/del.png"
        @click.stop="delClick"
        alt=""
        class="delImg"
        v-if="imageUrl != '' && imageUrl != null"
      />
    </a-upload>
    <!-- <div class="img_tip">（支持jpg、png，建议尺寸500px*500px）</div> -->
  </div>
</template>
<script lang="ts">
  import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
  import { message } from 'ant-design-vue';
  import { defineComponent, ref } from 'vue';
  import { uploadIMG, getbase64Img } from '/@/api/sys/upload';
  interface FileItem {
    uid: string;
    name?: string;
    status?: string;
    response?: string;
    url?: string;
    type?: string;
    size: number;
    originFileObj: any;
  }

  export default defineComponent({
    components: {
      LoadingOutlined,
      PlusOutlined,
    },
    props: {
      bgimg: {
        type: String,
        defailt: '',
      },
    },
    emits: ['sendIMGInfo'],
    setup(props, { emit }) {
      const fileList = ref([]);
      const loading = ref<boolean>(false);
      let imageUrl = ref<string>('');
      imageUrl.value = Base64Imgget(props.bgimg);
      function Base64Imgget(path) {
        if (path == '' || path == null || path == undefined) {
          return false;
        }
        if (path.includes('data:image/png;base64') == true) {
          return path;
        } else {
          getbase64Img({
            file_path: path,
          }).then((rex) => {
            imageUrl.value = rex.data;
          });
        }
      }

      const handleChange = (info: any) => {
        loading.value = true;
        const formData = new FormData();
        formData.append('img', info.file);
        uploadIMG(formData).then((res: any) => {
          loading.value = false;
          getbase64Img({
            file_path: res.data.data.path,
          }).then((rex) => {
            imageUrl.value = rex.data;
            loading.value = false;
            emit('sendIMGInfo', res.data.data.path);
          });
        });
      };
      //删除图片
      const delClick = () => {
        imageUrl.value = '';
        emit('sendIMGInfo', '');
      };

      const beforeUpload = (file: FileItem) => {
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
        if (!isJpgOrPng) {
          message.error('仅支持jpg,png格式图片');
        }
        const isLt3M = file.size / 1024 / 1024 < 3;
        if (!isLt3M) {
          message.error('图片大小不能大于3MB!');
        }
        return isJpgOrPng && isLt3M;
      };

      return {
        fileList,
        loading,
        imageUrl,
        handleChange,
        beforeUpload,
        delClick,
      };
    },
  });
</script>
<style lang="less">
  .upload-img-wrapper {
    display: flex;
    .ant-upload-picture-card-wrapper {
      width: 100px;
    }
    .img_tip {
      margin-left: 10px;
      width: 200px;
    }
  }
  .img_tip {
    // color: #000;
    font-size: 12px;
    margin-top: -3px;
    line-height: 20px;
    font-weight: 500;
  }
  .bg_img {
    width: 100px;
    height: 100px;
  }

  .delImg {
    position: absolute;
    width: 20px;
    height: 20px;
    right: 2px;
    top: 2px;
    z-index: 999;
  }
  .avatar-uploader > .ant-upload {
    width: 100px;
    height: 100px;
    position: relative;
  }
  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
    font-size: 12px;
  }
</style>
